<template>
  <div id="bottombar">
    <div class="checkall"  @click="changecheck">
      <check-button  :ischeck="ischeckall"></check-button>
      <div>全选</div>
    </div>

    <div class="totalprice">总计{{totalprice}}</div>
    <div class="calcu" @click="gocalc">去计算({{getcartlenth}})</div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import CheckButton from "../../../components/content/checkbutton/CheckButton";

  export default {
    name: "cartbottombar",
    components: {CheckButton},
    data(){
      return {}
    },
    methods:{
      changecheck(){
        //全部选中
        if(this.ischeckall){
          this.getcart.forEach(item => item.ischecked = false)
        }else{//部分或全部不选中
          this.getcart.forEach(item => item.ischecked = true)
        }

      },
      gocalc(){
        if (this.getcartlenth === 0){
          this.$toast.show('请先选择购买商品')
        }

      }
    },
    computed:{
      ...mapGetters(['getcart','getcartlenth']),
      totalprice(){
        return "￥"+this.getcart.filter(item => {
          return item.ischecked
        }).reduce((prevalue , item ) => {
          return prevalue + item.count *item.price
        },0).toFixed(2)
      },
      getcartlenth(){
        return this.getcart.filter( item => {
          return item.ischecked
        }).length
      },
      ischeckall(){
        if(this.getcartlenth === 0) return false

        // // 1.使用filter
        // return !this.getcart.filter( item => {
        //   !item.ischecked
        // }).length

        //2.使用find
        return !this.getcart.find( item=> !item.ischecked )

        //3.普通遍历
        // for (let item of this.getcart){
        //   if (item.ischecked === false )
        //     return false
        // }
        // return true
      }

    }
  }
</script>

<style scoped>
  #bottombar{
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;

    height:40px;
    width: 100%;
    background-color: #eeeeee;

  }

  .checkall{
    display: flex;
    width: 80px;
  }

  .totalprice{
    flex:1
  }

  .calcu{
    line-height: 40px;
    width: 80px;
    height: 100%;
    background-color: aquamarine;
  }



  .checkall>div{
    margin-left: 10px;
  }
</style>
